<template>
    <div class="container">
        <div  v-for="items in itemNames">
            <div class="items-main" @click="routerChange(items.path)">
                <div class="itemsOne">
                    <span class="iconfont" :class="items.icon"></span>
                    <div class="itemsName">{{ items.name }}</div>
                </div>
                <div class="itemsTwo">
                    <div class="extraIntroduce">{{ items.extraIntroduce }}</div>
                    <span class="iconfont">&#xe799;</span>
                </div>
            </div>
            <div class="lines"></div>
        </div>
    </div>
</template>

<script>
export default {
    name: "userMine-items",
    data(){
        return{
            itemNames:[
                {
                    icon:'icon-lingdang',
                    name:'包裹通知设置',
                    extraIntroduce:'',
                    path:'/inform',
                },
                {
                    icon:'icon-qiehuandianpu',
                    name:'版本切换',
                    extraIntroduce:'',
                    path:'change',
                },
                {
                    icon:'icon-dizhi',
                    name:'我的地址簿',
                    extraIntroduce:'',
                    path:'/address'
                },
                {
                    icon:'icon-shenfen',
                    name:'身份码',
                    extraIntroduce:'',
                    path:'/identityCode'
                },
                {
                    icon:'icon-icon_huabanfuben',
                    name:'实人通信证',
                    extraIntroduce:'去认证',
                    path:'/nameGoCode'
                },
                {
                    icon:'icon-erji',
                    name:'服务中心',
                    extraIntroduce:'',
                    path: '/talking'
                },
                {
                    icon:'icon-wendang',
                    name:'我要反馈',
                    extraIntroduce:''
                },
                {
                    icon:'icon-gongyi',
                    name:'3小时公益',
                    extraIntroduce:''
                }
            ]
        }
    },
    methods:{
        routerChange(item){
            this.$router.push(item);
        }
    }
}
</script>

<style lang="scss" scoped>
/*引入图标*/
@import "../../assets/userIconFont/iconfont.css";
    .container{
        margin-top: 50px;
        .items-main{
            padding: 20px 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: white;
            .itemsOne{
                display: flex;
                justify-content: center;
                align-items: center;
                span{
                    font-size: 40px;
                    color: #2f8cff;
                    margin-right: 10px;
                }
                .itemsName{
                    font-size: 28px;
                }
            }
            .itemsTwo{
                display: flex;
                justify-content: center;
                align-items: center;
                .extraIntroduce{
                    color:#c8c8d7;
                    font-size: 10px;
                    margin-right: 20px;
                }
                span{
                    transform: rotate(180deg);
                    color: #8590a6;
                }
            }
        }
        .lines{
            height: 3px;
            width: 100px;
        }
    }
</style>